<template>
  <el-container>
    <el-header>
      <el-menu
        default-active="1"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        active-text-color="#ff5c26"
        @select="handleSelect"
      >
        <el-menu-item index="1">制作证件照</el-menu-item>
        <el-menu-item index="2">图片压缩</el-menu-item>
        <el-menu-item index="3">图片格式转换</el-menu-item>
        <el-menu-item index="4">修改背景色</el-menu-item>
        <el-menu-item index="5">修改图片大小</el-menu-item>
        <el-menu-item index="6">图片旋转</el-menu-item>
        <el-menu-item index="7">图片加水印</el-menu-item>
      </el-menu>
    </el-header>

    <el-main style="padding:0">
      <router-view />
    </el-main>
    <el-footer>
      <div class="footer">
        © 2011-2022 ypstudy.com All rights reserved. 鄂ICP备10110000号
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      routers: ["/", "compress"],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      if (this.routers[key-1]) {
        this.$router.push(this.routers[key-1]);
      }
    },
  },
};
</script>

<style scoped>
.footer {
  font-size: 14px;
  color: #999;
  text-align: center;
}
:deep() .el-header {
  --el-header-padding: 0;
  --el-header-height: 60px;
  box-shadow: #ddd 1px 1px 3px;
  padding: 0 100px;
}
:deep() .el-menu {
  --el-menu-item-height: 58px;
}
</style>